<template>
  <div class="app-container">
    <el-card class="m-2">
      <section slot="header">
        <el-input
          v-model="listQuery.search"
          class="marginRB10"
          clearable
          placeholder="请输入菜单名称"
          style="width:200px;"
        ></el-input>
        <el-select
          v-model="listQuery.status"
          class="marginRB10"
          filterable
          placeholder="请选择菜单状态"
        >
          <el-option
            v-for="item in optionsStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select
          v-model="listQuery.level"
          class="marginRB10"
          filterable
          placeholder="请选择菜单层级"
        >
          <el-option
            v-for="item in optionsLevel"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          class="marginRB10"
          icon="el-icon-search"
          type="primary"
          @click="getList"
        >搜索
        </el-button
        >

        <el-button
          class="filter-item marginRB10"
          icon="el-icon-plus"
          type="primary"
          @click="handleCreate"
        >添加
        </el-button>
        <el-button type="primary" @click="handleReset">重置</el-button>
      </section>

      <el-table
        ref="refTable"
        :data="menuList"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        border
        row-key="menu_id"
        stripe
        @row-click="clickTable"
      >
        <el-table-column label="菜单编号" prop="menu_id" width="120"/>
        <el-table-column label="菜单名称" prop="menu_name"/>
        <el-table-column label="菜单路由" prop="menu_key"/>
        <el-table-column label="添加时间" prop="add_time"/>
        <el-table-column label="状态" prop="status">
          <template slot-scope="{ row }">
            <p v-if="row.status === 1" v-text="'显示'"/>
            <p v-else v-text="'隐藏'"/>
          </template>
        </el-table-column>
        <el-table-column label="父级编号" prop="parent_id"/>
        <el-table-column label="层级" prop="level">
          <template slot-scope="{row}">
            {{ row.level === 1 ? '一级' : '' }}
            {{ row.level === 2 ? '二级' : '' }}
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort"/>
        <el-table-column label="图标地址" prop="icon"/>
        <el-table-column label="操作" width="180">
          <template slot-scope="{row}">
            <el-button
              class="el-edit-button"
              icon="el-icon-edit"
              plain
              size="mini"
              type="primary"
              @click.stop="handleUpdate(row)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <el-dialog
      :title="titleMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="600px"
    >
      <el-form
        ref="dataForm"
        :model="form"
        :rules="rules"
        label-position="right"
        label-width="120px"
        style="width: 400px; margin: 0 auto;"
      >
        <el-form-item label="菜单父级编号">
          <el-select
            v-model="form.parent_id"
            class="filter-item"
            clearable
            filterable
            placeholder="请选择菜单父级"
            style="width: 280px;"
          >
            <el-option
              v-for="item in menuListOne"
              :key="item.menu_id"
              :label="item.menu_name"
              :value="item.menu_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menu_name">
          <el-input v-model="form.menu_name" placeholder="请输入菜单名称"/>
        </el-form-item>
        <el-form-item label="菜单key值" prop="menu_key">
          <el-input v-model="form.menu_key" placeholder="请输入菜单key值"/>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="form.icon" disabled/>
        </el-form-item>
        <el-form-item label="菜单层级" prop="level">
          <el-input-number
            v-model="form.level"
            :max="2"
            :min="1"
            label="请输入菜单层级"
            style="width: 280px;"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="菜单状态" prop="status">
          <el-radio v-model="form.status" :label="1" border>显示</el-radio>
          <el-radio v-model="form.status" :label="2" border>隐藏</el-radio>
        </el-form-item>
        <el-form-item label="菜单排序" prop="sort">
          <el-input-number
            v-model="form.sort"
            :min="1"
            label="请输入菜单排序"
            style="width: 280px;"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { saveMenu, treeMenu, updateMenu } from '@/api/config/menu'

import treeTable from '@/components/TreeTable'

const titleMap = {
  update: '编辑',
  create: '增加'
}

const menuTypeOptions = [
  { key: '1', display_name: '公会菜单' },
  { key: '2', display_name: '厅菜单' }
]

const menuStatus = [
  { key: '1', display_name: '显示' },
  { key: '2', display_name: '隐藏' }
]

const rules = {
  menu_name: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' },
    { min: 1, max: 25, message: '长度在 1 到 50 个字符', trigger: 'blur' }
  ],
  menu_key: [{ required: true, message: '请输入菜单key值', trigger: 'blur' }],
  parent_id: [{ required: true, message: '菜单父级编号', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
  level: [{ required: true, message: '请输入菜单层级', trigger: 'blur' }],
  sort: [{ required: true, message: '请输入菜单层级', trigger: 'blur' }]
}

export default {
  components: { treeTable },
  data() {
    return {
      expandAll: false,
      expandAllTitle: '展开全部',
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10,
        search: undefined,
        status: undefined,
        level: undefined
      },
      menuList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      titleMap,
      form: {
        menu_id: undefined,
        menu_key: undefined,
        menu_name: undefined,
        level: 1,
        icon: 'empty',
        status: 1,
        parent_id: undefined,
        sort: 1
      },
      menuTypeOptions,
      menuStatus,
      optionsStatus: [
        { value: undefined, label: '全部菜单状态' },
        { value: '1', label: '显示' },
        { value: '2', label: '隐藏' }
      ],
      optionsLevel: [
        { value: undefined, label: '全部菜单层级' },
        { value: '1', label: '一级' },
        { value: '2', label: '二级' }
      ],
      rules
    }
  },
  computed: {
    menuListOne() {
      return [
        { menu_name: '顶级', menu_id: 0 },
        ...this.menuList
      ]
    },
    refTable() {
      return this.$refs.refTable
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      treeMenu(this.listQuery)
        .then(response => this.menuList = response.data)
        .catch(() => this.$message.error('获取菜单出错'))
        .finally(() => this.listLoading = false)
    },
    //重置
    handleReset() {
      this.listQuery.search = undefined
      this.listQuery.status = undefined
      this.listQuery.level = undefined
      this.getList()
    },
    handleCreate() {
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleUpdate(row) {
      this.form = row
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    submitForm() {
      const formIns = this.$refs.dataForm
      formIns.validate(valid => {
        if (!valid) return

        if (this.dialogStatus === 'create') {
          saveMenu(this.form).then(response => {
            const { code, message } = response
            if (code === 200) {
              this.getList()
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
            } else {
              this.$message({
                message: message,
                type: 'error'
              })
            }

            this.dialogFormVisible = false
          })
        } else if (this.dialogStatus === 'update') {
          updateMenu(this.form).then(response => {
            const { code, message } = response
            if (code === 200) {
              this.getList()
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
              this.dialogFormVisible = false
            } else {
              this.$message({
                message: message,
                type: 'error'
              })
            }
          })
        }
      })
    },

    resetForm() {
      this.form = {
        id: undefined,
        menu_key: undefined,
        menu_name: undefined,
        level: 2,
        icon: undefined,
        status: 1,
        sort: 1,
        parent_id: 0
      }
    },
    clickTable(row) {
      this.refTable.toggleRowExpansion(row)
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.app-container /deep/ .el-date-editor.el-input {
  margin-bottom : 10px;
}

.app-container /deep/ .el-select {
  margin-bottom : 10px;
}

/deep/ .el-table__row--level-1 {
  background-color : #edf8ff !important;
}
</style>
